<template>
    <div>
        <el-table
                :data="devices"
                v-loading="$util.loading"
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="code"
                    label="编码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="description"
                    label="设备描述">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-divider></el-divider>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                @current-change="currentChange">
        </el-pagination>
        <el-dialog
                title="设备详情"
                :visible.sync="deviceDialog.visible"
                width="30%">
            <span>{{deviceDialog.data.description}}</span>
            <span slot="footer" class="dialog-footer">
                <el-radio-group v-model="deviceDialog.status" @change="setStatus">
                  <el-radio-button label="正常"></el-radio-button>
                  <el-radio-button label="维修中"></el-radio-button>
                  <el-radio-button label="报废"></el-radio-button>
                </el-radio-group>
                <!--<el-button type="primary" @click="deviceDialog.visible = false">返 回</el-button>-->
            </span>
        </el-dialog>
    </div>
</template>

<script>
    module.exports={
        data: function () {
            return {
                total: 0,
                devices: [],
                roomCode: '',
                deviceDialog: {
                    data: {},
                    visible: false,
                    status: ''
                },
                page: 1
            }
        },
        created: function(){
            this.roomCode = this.$route.params.id
            this.getDeviceList(1)
        },
        watch:{
            $route(to,from){
                this.roomCode = this.$route.params.id
                this.getDeviceList(1)
            }
        },
        methods: {
            //1、分页查询设备列表
            getDeviceList(page){
                let vm = this
                let roomCode = this.roomCode || this.$route.params.id
                if(!roomCode){
                    return
                }
                this.page = page || 1
                window.$util.getDeviceByRoom(roomCode, page, function (data) {
                    vm.total = data.total
                    vm.devices = data.devices
                })
            },
            //2、换页
            currentChange(page){
                this.getDeviceList(page)
            },
            //3、显示对话框
            handleClick(row) {
                this.deviceDialog.data = row
                this.deviceDialog.visible = true
                this.deviceDialog.status = row.status
            },
            //4、设置设备状态
            setStatus(status) {
                let vm = this
                this.$confirm('此操作将修改当前设备的状态, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deviceDialog.data.status = status
                    $util.saveDeviceStatus(this.deviceDialog.data, function (data) {
                        if(data.success){
                            vm.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                            vm.deviceDialog.visible = false //关闭对话框
                            vm.getDeviceList(vm.page)
                        }
                    })
                }).catch(() => {
                    this.deviceDialog.status = this.deviceDialog.data.status
                    this.$message({
                        type: 'info',
                        message: '已取消修改'
                    });
                });
            }
        }
    }
</script>

<style scoped>

</style>
